<template>
  <div class="self_adaption">
    <div class="g-container">
      <div class="other">
        <p class="main_text">商城申诉</p>
      </div>
      <!-- 搜索 -->
      <div class="g-search" ref="searchBox">
        <!-- 信息区域 -->
        <div class="all_select">
          <!-- 时间选择区域 -->
          <span class="demonstration">提交时间：</span>
          <el-date-picker
            v-model="searchValue.startAt"
            type="date"
            placeholder="开始时间"
            @change="startTime"
            :clearable="false"
            :default-time="defaultTime(0, 0, 0)" />
          <span class="demonstration" style="display: inline-block; font-size: 12px; color: #898989; margin: 20px"
            >至</span
          >
          <el-date-picker
            v-model="searchValue.endAt"
            type="date"
            placeholder="结束时间"
            @change="endTime"
            :clearable="false"
            :default-time="defaultTime1(23, 59, 59)" />
          &emsp;
          <el-radio-group v-model="radio" class="ml-4" @change="radioSelect">
            <el-radio label="1" size="large">今天</el-radio>
            <el-radio label="2" size="large">昨天</el-radio>
            <el-radio label="3" size="large">近3天</el-radio>
            <el-radio label="4" size="large">近1周</el-radio>
            <el-radio label="5" size="large">近1个月</el-radio>
            <el-radio label="6" size="large">近3个月</el-radio>
            <el-radio label="7" size="large">近1年</el-radio>
          </el-radio-group>
        </div>
        <div class="all_select" style="margin-top: 5px">
          <div style="display: flex; align-items: center">
            <!-- 投诉订单编号 -->
            <div class="input_valye">
              <span class="demonstration">申诉单号：</span>
              <input
                type="text"
                class="input"
                placeholder="请输入申诉单号"
                v-model="searchValue.appealSn"
                style="width: 180px"
                @keyup.enter="search" />
            </div>
            <!-- 申诉群体 -->
            <div class="input_valye">
              <span class="demonstration">申诉群体：</span
              ><el-select
                v-model="searchValue.appealType"
                class="m-2"
                placeholder="请选择优惠券类型"
                style="width: 175px"
                @change="search">
                <el-option v-for="item in type_options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <!-- 底部按钮区域 -->
        <div class="bottom_btn">
          <el-button class="solid" @click="search">查询</el-button>
          <el-button class="hollow" @click="reset">重置</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table" style="padding: 0px 20px">
        <el-tabs v-model="searchValue.status" @tab-change="tabClick">
          <el-tab-pane label="全部" name="" />
          <el-tab-pane label="待处理" name="0" />
          <el-tab-pane label="处理中" name="1" />
          <el-tab-pane label="已完成" name="2" />
        </el-tabs>
        <!-- 表格区域 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :header-cell-style="{'text-align': 'center'}"
          :show-overflow-tooltip="true"
          border>
          <el-table-column prop="appealSn" label="申诉单号" align="center" />
          <el-table-column prop="appealType" label="申诉群体" align="center">
            <template #default="item">
              <span v-if="item.row.appealType == 0">店铺</span><span v-else>用户</span>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="店铺名/用户名" align="center">
            <template #default="item">
              <span v-if="item.row.shopId">{{ item.row.shopName }}</span>
              <span v-else>{{ item.row.username }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="投诉类型" align="center">
            <template #default="item">
              <span v-if="item.row.type == 0">商品投诉</span>
              <span v-else-if="item.row.type == 1">商家服务投诉</span>
              <span v-else-if="item.row.type == 2">商家承诺履行投诉</span>
              <span v-else="item.row.type == 3">其他</span>
            </template>
          </el-table-column>
          <el-table-column prop="reason" label="申诉原因" align="center" />
          <el-table-column prop="createAt" label="提交时间" align="center" width="200" />
          <el-table-column prop="username" label="处理状态" align="center">
            <template #default="item">
              <el-text v-if="item.row.status == 0" type="dange">• 待处理</el-text>
              <el-text v-else-if="item.row.status == 1" type="success">• 处理中</el-text>
              <el-text v-else type="info"> • 已处理</el-text>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300" class="operation" :show-overflow-tooltip="false">
            <template #default="item">
              <div class="table_btn">
                <el-button size="small" class="none" @click="look(item.row)">查看</el-button>
                <el-button size="small" class="none" @click="dispose(item.row.id)" v-if="item.row.status == 0"
                  >开始处理</el-button
                ><el-button size="small" class="none" @click="finish(item)" v-if="item.row.status == 1"
                  >结束处理</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <smartPager
          v-model:current-page="searchValue.page"
          v-model:page-size="searchValue.rows"
          :total="Number(total)"
          @change="pageChange" />
      </div>
    </div>
    <!-- 查看订单 -->
    <el-drawer
      v-model="orderShow"
      class="order"
      size="700px"
      style="position: absolute !important; z-index: 40 !important"
      @close="drawerClose"
      :z-index="70"
      :with-header="false">
      <el-form
        ref="ruleFormRef"
        :model="formDataMes"
        label-width="100px"
        label-position="right"
        :rules="formDataMes.type == 0 ? rules : rules1">
        <p class="title">申诉单</p>
        <!-- /*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/  申诉内容  /*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/ -->
        <p class="mes">申诉内容</p>
        <el-form-item label="申诉编号">{{ lookMes.appealSn }}</el-form-item>
        <el-form-item label="账户名" v-if="lookMes.shopId">
          {{ lookMes.shopName }}
        </el-form-item>
        <el-form-item label="账户名" v-else>
          {{ lookMes.username }}
        </el-form-item>
        <el-form-item label="订单编号">
          {{ lookMes.complaint.orderSn }}
        </el-form-item>
        <el-form-item label="提交时间"> {{ lookMes.createAt }} </el-form-item>
        <el-form-item label="申诉原因"> {{ lookMes.reason }} </el-form-item>
        <el-form-item label="申诉说明">
          {{ lookMes.description }}
        </el-form-item>
        <div style="margin-left: 100px; margin-bottom: 10px" v-if="lookMes.appealImgs">
          <div v-if="lookMes.appealImgs.length != 0">
            <el-image
              v-for="(item, index) in lookMes.appealImgs"
              :key="index"
              :preview-src-list="[item]"
              :src="item"
              class="ph_b"
              style="width: 100px; height: 100px" />
          </div>
        </div>

        <!-- /*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/  相关投诉内容  /*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/ -->
        <p class="mes">相关投诉内容</p>
        <el-form-item label="投诉ID">{{ lookMes.complaint.id }} </el-form-item>
        <el-form-item label="提交用户">
          {{ lookMes.complaint.username }}
        </el-form-item>
        <el-form-item label="联系方式">
          {{ lookMes.complaint.contact }}
        </el-form-item>
        <el-form-item label="投诉订单">
          {{ lookMes.complaint.orderSn }}
        </el-form-item>
        <el-form-item label="提交时间">
          {{ lookMes.complaint.createdAt }}
        </el-form-item>
        <el-form-item label="投诉类型">
          {{ lookMes.complaint.type }}
        </el-form-item>
        <el-form-item label="投诉原因">
          {{ lookMes.complaint.reason }}
        </el-form-item>
        <el-form-item label="投诉说明">
          {{ lookMes.complaint.description }}
        </el-form-item>
        <div style="margin-left: 100px; margin-bottom: 10px" v-if="lookMes.complaint.complaintImgs">
          <div v-if="lookMes.complaint.complaintImgs.length != 0">
            <el-image
              v-for="(item, index) in lookMes.complaint.complaintImgs"
              :key="index"
              :preview-src-list="[item]"
              :src="item"
              class="ph_b"
              style="width: 100px; height: 100px" />
          </div>
        </div>

        <!-- /*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/  投诉处理  /*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/ -->
        <p class="mes">申诉处理</p>

        <el-form-item label="处理人" prop="name">
          <el-input v-model="disposeMes.admin" class="form_input" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="申诉结果" prop="name">
          <el-select v-model="disposeMes.result" class="m-2" placeholder="选择处理结果">
            <el-option v-for="item in result_options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="说明" prop="name">
          <el-input
            v-model="disposeMes.note"
            cols="30"
            rows="4"
            class="form_input"
            type="textarea"
            maxlength="250"
            show-word-limit
            placeholder="选填"></el-input>
        </el-form-item>
      </el-form>
      <div style="height: 100px"></div>
      <div class="btn_center">
        <el-button class="hollow" @click="maskBtn1">取消</el-button>
        <el-button class="solid" @click="Sure">确定</el-button>
      </div>
    </el-drawer>
    <!-- 遮罩层 -->
    <div id="mask1" v-if="mask" @click="maskBtn1"></div>
  </div>
</template>
<script setup lang="ts">
import {ref, onMounted, reactive, onBeforeUnmount} from 'vue';
import {
  RequestAppealGetPageList,
  RequestAppealStartDeal,
  RequestAppealGetDetail,
  RequestAppealDealAppeal,
} from '@/api/path/index.js';
import {CirclePlus, Remove} from '@element-plus/icons-vue';
import moment from 'moment';
import type {FormInstance} from 'element-plus';
import {ElMessage} from 'element-plus';
const activeName = ref('first');
const ruleFormRef = ref<FormInstance>();
const defaultTime = (H: any, M: any, S: any) => {
  var now = new Date();
  now.setHours(H);
  now.setMinutes(M);
  now.setSeconds(S);
  return now;
};
const defaultTime1 = (H: any, M: any, S: any) => {
  var now = new Date();
  now.setHours(H);
  now.setMinutes(M);
  now.setSeconds(S);
  return now;
};

/**
 * 时间范围单选按钮
 */
const radioSelect = () => {
  searchValue.value.startAt = '';
  searchValue.value.endAt = '';
  var now = new Date();
  now.setHours(0);
  now.setMinutes(0);
  now.setSeconds(0);
  var now1 = new Date();
  now1.setHours(23);
  now1.setMinutes(59);
  now1.setSeconds(59);
  searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  if (radio.value === '1') {
    searchValue.value.startAt = moment(now).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '2') {
    searchValue.value.startAt = moment(now).subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '3') {
    searchValue.value.startAt = moment(now).subtract(3, 'days').format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '4') {
    searchValue.value.startAt = moment(now).subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '5') {
    searchValue.value.startAt = moment(now).subtract(1, 'months').format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '6') {
    searchValue.value.startAt = moment(now).subtract(3, 'months').format('YYYY-MM-DD HH:mm:ss');
  } else {
    searchValue.value.startAt = moment(now).subtract(1, 'years').format('YYYY-MM-DD HH:mm:ss');
  }
  search();
};
// 弹框数据
const formDataMes = ref({
  name: '',
  type: '',
  quantity: '',
  effectTime: '',
  expireTime: '',
  limitPrice1: '',
  limitPrice2: '',
  amount: '',
  discount: '',
  rangeDate1: [],
});
// 表单规则
const rules = reactive({
  name: [{required: true, message: '请输入优惠券名称', trigger: 'blur'}],
  // unit: [{ required: true, message: '请选择商品单位', trigger: 'change' }],
  type: [{required: true, message: '请选择优惠券类型', trigger: 'blur'}],
  quantity: [
    {required: true, message: '请输入发放数量', trigger: 'blur'},
    {
      pattern: /^\d+(\.\d{1,2})?$/,
      message: '请输入正确数量',
      trigger: 'blur',
    },
  ],
  rangeDate1: [{required: true, message: '请选择使用时限', trigger: 'blur'}],
  limitPrice1: [
    {required: true, message: '请输入价格', trigger: 'blur'},
    {
      pattern: /^\d+(\.\d{1,2})?$/,
      message: '请输入正确价格，示例20,20.0,20.00',
      trigger: 'blur',
    },
  ],
  amount: [
    {required: true, message: '请输入优惠金额', trigger: 'blur'},
    {
      pattern: /^\d+(\.\d{1,2})?$/,
      message: '请输入正确价格，示例20,20.0,20.00',
      trigger: 'blur',
    },
  ],
});
// 表单规则
const rules1 = reactive({
  name: [{required: true, message: '请输入优惠券名称', trigger: 'blur'}],
  // unit: [{ required: true, message: '请选择商品单位', trigger: 'change' }],
  type: [{required: true, message: '请选择优惠券类型', trigger: 'blur'}],
  quantity: [
    {required: true, message: '请输入发放数量', trigger: 'blur'},
    {
      pattern: /^\d+(\.\d{1,2})?$/,
      message: '请输入正确数量',
      trigger: 'blur',
    },
  ],
  rangeDate1: [{required: true, message: '请选择使用时限', trigger: 'blur'}],
  limitPrice2: [
    {required: true, message: '请输入价格', trigger: 'blur'},
    {
      pattern: /^\d+(\.\d{1,2})?$/,
      message: '请输入正确价格，示例20,20.0,20.00',
      trigger: 'blur',
    },
  ],
  discount: [
    {required: true, message: '请输入折扣', trigger: 'blur'},
    {
      pattern: /^\d+(\.\d{1})?$/,
      message: '请输入正确折扣',
      trigger: 'blur',
    },
  ],
});
const tableData = ref<any>([]); // 表格列表
const total = ref(0); //表格总数
const mask = ref(false); //控制遮罩层显示
const orderShow = ref(false); //弹出层显示
const radio = ref('');
interface RestaurantItem {
  value: string;
  link: string;
}
const consolidateOrder = ref<any>([]);
const restaurants = ref<RestaurantItem[]>([]);
const loadAll = () => {
  return consolidateOrder.value;
};
// 挂载
onMounted(() => {
  appealGetPageList();
  restaurants.value = loadAll();
  handleResize();
  window.addEventListener('resize', handleResize);
});
const searchBox = ref();
const tablelistHeight = ref();
const handleResize = () => {
  const searchBoxHeight = searchBox.value.clientHeight;
  tablelistHeight.value = 110 + searchBoxHeight + 'px';
  console.log('Search Box height11111111111111111111111111111:', searchBoxHeight);
};
/**
 * 获取申诉列表
 */
const appealGetPageList = async () => {
  const a = await RequestAppealGetPageList(searchValue.value);
  tableData.value = a.resultObj.list;
  total.value = a.resultObj.count;
  console.log(a);
};
// 搜索参数
const searchValue = ref({
  appealType: '',
  appealSn: '',
  startAt: '',
  endAt: '',
  status: '',
  page: 1,
  rows: 10,
});
// 开始时间
const startTime = () => {
  radio.value = '0';
  searchValue.value.startAt.setHours(0);
  searchValue.value.startAt.setMinutes(0);
  searchValue.value.startAt.setSeconds(0);
  searchValue.value.startAt = moment(searchValue.value.startAt).format('yyyy-MM-DD HH:mm:ss');
  search();
};
// 结束时间
const endTime = () => {
  radio.value = '0';
  searchValue.value.endAt.setHours(23);
  searchValue.value.endAt.setMinutes(59);
  searchValue.value.endAt.setSeconds(59);
  searchValue.value.endAt = moment(searchValue.value.endAt).format('yyyy-MM-DD HH:mm:ss');
  search();
};
/**
 * 类型选择器
 */
const type_options = [
  {
    value: 0,
    label: '店铺',
  },
  {
    value: 1,
    label: '用户',
  },
];
/**
 * 切换类型
 */
const tabClick = () => {
  appealGetPageList();
};
/**
 * 点击查看
 */
const lookMes = ref();
const disposeMes = ref({
  adminId: '',
  admin: '',
  result: '',
  note: '',
  appealId: '',
});
const look = async (item: any) => {
  const a = await RequestAppealGetDetail(item.id);
  if (a.msg == '操作成功！') {
    if (a.resultObj.status == 2) {
      disposeMes.value.result = a.resultObj.result;
      disposeMes.value.note = a.resultObj.note;
    } else {
      disposeMes.value.adminId = JSON.parse(localStorage.getItem('roleInfo')!).id;
      disposeMes.value.admin = JSON.parse(localStorage.getItem('userMes')!).name;
    }
    orderShow.value = true;
    console.log('查看详情', a.resultObj);
    lookMes.value = a.resultObj;
    disposeMes.value.appealId = item.id;
  } else {
    ElMessage.error('操作失败！请重试！');
  }
};

/**
 * 处理结果选择器
 */
const result_options = [
  {
    value: 0,
    label: '不通过',
  },
  {
    value: 1,
    label: '通过',
  },
];
/**
 * 点击处理
 */
const dispose = async (id: number) => {
  const a = await RequestAppealStartDeal(id);
  if (a.msg == '操作成功！') {
    ElMessage.success('开始处理！');
    appealGetPageList();
  } else {
    ElMessage.error('操作失败！');
  }
};
/**
 * 结束处理
 */
const finish = (item: any) => {
  console.log(disposeMes.value);
};
/**
 * 弹出层确认处理
 */
const Sure = async () => {
  console.log(disposeMes.value);
  const a = await RequestAppealDealAppeal({
    adminId: disposeMes.value.adminId,
    result: disposeMes.value.result,
    note: disposeMes.value.note,
    appealId: disposeMes.value.appealId,
  });
  if (a.msg == '操作成功！') {
    ElMessage.success('处理成功！');
    drawerClose();
    appealGetPageList();
  } else {
    ElMessage.success('处理失败！请重试');
  }
};
/***************************  抽屉关闭事件  *************************/
const drawerClose = () => {
  orderShow.value = false;
  mask.value = false;
  disposeMes.value = {
    adminId: '',
    admin: '',
    appealId: '',
    result: '',
    note: '',
  };
};
/**
 * 搜索
 */
const search = async () => {
  // 判断开始时间不能早于当前时间
  if (moment(searchValue.value.startAt).diff(moment().format('YYYY-MM-DD HH:mm:ss')) >= 0) {
    ElMessage.error('开始时间不能晚于当前日期');
    searchValue.value.startAt = '';
  } else {
    // 判断是否两个时间都填写了
    if (searchValue.value.startAt !== '' && searchValue.value.endAt !== '') {
      // 判断开始时间不能晚于结束时间
      if (moment(searchValue.value.startAt).diff(moment(searchValue.value.endAt)) <= 0) {
        searchValue.value.page = 1;
        appealGetPageList();
      } else {
        ElMessage.error('结束时间不能早于开始时间');
        searchValue.value.endAt = '';
      }
    } else {
      searchValue.value.page = 1;
      appealGetPageList();
    }
  }
};
/**
 * 点击重置
 */
const reset = () => {
  searchValue.value = {
    appealType: '',
    appealSn: '',
    startAt: '',
    endAt: '',
    status: '',
    page: 1,
    rows: 10,
  };
  appealGetPageList();
  radio.value = '0';
};
/**
 * 分页
 */
const pageChange = async (val: number) => {
  appealGetPageList();
};
/**
 * 遮罩层数据
 */
const maskBtn1 = () => {
  orderShow.value = false;
  mask.value = false;
  disposeMes.value = {
    adminId: '',
    admin: '',
    appealId: '',
    result: '',
    note: '',
  };
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/plateform/Article/Content.css';
@import '@/assets/css/plateform/Shop/GoodsManage.css';

.order {
  .ph_b {
    width: 50px;
    height: 50px;
    margin-top: 10px;
    margin-right: 10px;
    background: pink;
  }

  .title {
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 20px;
    font-weight: bold;
  }

  .mes {
    font-size: 16px;
    line-height: 40px;
    color: #1d2129;
    background: #f5f7fa;
    padding-left: 10px;
    margin-bottom: 10px;
  }

  .mes_title {
    font-size: 14px;
    color: #333;
    line-height: 22px;
    margin-bottom: 8px;
  }

  .range {
    display: flex;
    align-items: center;
    position: relative;

    .range_box {
      display: flex;
      align-items: center;
      width: calc(100% - 110px);

      .range_box1 {
        width: 100%;
        margin-top: 20px;
      }
    }

    .range_operat {
      width: 64px;
      display: flex;
      align-items: center;
      position: absolute;
      right: 0;
      bottom: 5px;
    }
  }
}

::v-deep .el-radio.el-radio--large {
  width: 78px !important;
}

.sp ::v-deep .el-radio.el-radio--large {
  margin-top: 15px;
}

::v-deep .el-drawer__body {
  padding: 20px !important;
  background: #fff;
}

.table {
  height: calc(100vh - 160px - v-bind(tablelistHeight)) !important;
}

::v-deep .el-table--fit {
  height: calc(100% - 120px) !important;
}

.table :deep(.el-table__cell) {
  text-align: center;
}

::deep(.el-radio-group) {
  width: 100% !important;
  background: pink !important;
}

::v-deep .el-range-editor--small.el-input__wrapper {
  height: 40px !important;
}

.el-form-item :deep(.el-input-group__prepend) {
  width: 10px;
  background-color: #116cf8;
  color: #fff;
}

.el-form-item :deep(.el-upload--picture-card) {
  height: 100px;
  width: 100px;
  opacity: 0;
}

.btn {
  width: 150px;
  position: absolute;
  right: 20px;
  bottom: 40px;
}

::v-deep .el-drawer.rtl {
  background: #f5f9ff !important;
  width: 750px !important;
}

.close_order :deep(.is-finish .el-step__line) {
  background: #f57373;
}

.order_edit {
  position: fixed;
  width: 40%;
  height: 50%;
  background: #fff;
  z-index: 300;
  top: 25%;
  left: 25%;
  overflow: scroll;

  .el-form {
    position: relative;
    z-index: 350;
    padding: 20px 50px;

    .el-form-item {
      position: relative;
      z-index: 400;

      .el-input {
        position: relative;
        z-index: 700;
      }
    }
  }
}

.el-table .warning-row {
  background: #44a2ff !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
  z-index: initial !important;
}
</style>
